<%@ page language="java" pageEncoding="UTF-8"%>
<%@include file="../../common/import.jsp"%>
<html>
<head>
<title></title>
   <style type="text/css">
	  .grid_layout{
			width: 100%;
			align: center;
	  }
	  .grid_layout th{
			border: 0px solid #e6e7e9;
			border-width: 0px;
			padding: 2px 0px;
			width: 30%;
			text-align: right;
			vertical-align: middle;
	   }
	  .grid_layout td{
			border: 0px solid #e6e7e9;
			border-width: 0px;
			padding: 2px 0px;
			text-align: left;
			vertical-align: middle;
	  }
	  
	  ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;}
	  
   </style>
   <link href="${ctx}/resources/js/ztree/zTreeStyle.css" rel="stylesheet" type="text/css" />
   <script src="${ctx}/resources/js/ztree/jquery.ztree.core-3.4.min.js" type="text/javascript"></script>
   <script src="${ctx}/resources/js/jquery.validate.min.js" type="text/javascript"></script>
   <script type="text/javascript">
        var isEdit = ('${user.id}') != ""?true:false;
        var setting = {
        		async: {
       				enable: true,
       				dataType: "json",
       				url:"${ctx}/sys/organ/getOrganTree.do"
       			},
       		    data: {
       		      key: {
       	   			name: "NAME"
       	   		  },
    			  simpleData: {
    				enable: true,
    				idKey: "ID",
    				pIdKey: "PARENT_ID"
    			  }
    			},
    			callback: {
    				onAsyncSuccess: zTreeOnAsyncSuccess,
    				onClick: onClick
    			}
    		};
        function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
        	var treeObj = $.fn.zTree.getZTreeObj("organTree");
        	//treeObj.expandAll(true);
        	if(isEdit){//是否是修改操作
        		var organId = '${user.organId}';
        	    if(organId != ''){
        		   var organNode = treeObj.getNodeByParam("ID", organId, null);
        		   if(organNode!=undefined){
        			  $("#organName").attr("value", organNode.NAME);
        		   }
        		   var pNode = organNode.getParentNode();
        		   if(pNode!=undefined){
	           		  treeObj.expandNode(pNode, true, true, true);
	           	   }
       		    }
            }
        };
        $(function(){
        	$.fn.zTree.init($("#organTree"), setting);
        	
        	if(isEdit){//是否是修改操作
        		updateInit();//修改操作对页面进行值的设置
            }else{//添加页面时对页面进行的初始化设置
            	$("input[name=sex][value=1]").attr("checked",true);
            	$("#status").attr("checked",true);//打勾
            }
        	//$('input:radio[name="sex"]:checked').val()获取选中的值
	      $("#formTable").validate({
			   onsubmit: true, // 是否在提交时验证 
			   //onfocusout: true, // 是否在获取焦点时验证 
			   onkeyup: false,
			   validClass: 'checked',
			   rules: {
				   userName: {
						required: true,
						maxlength: 15,
						remote:{
							 type: "POST",
							 url: "${ctx}/sys/user/validateUserName.do",
							 dataType: "json", 
							 data: {
								 id: '${user.id}',
								 name: function() {
									   return $("#userName").val();
								   }
							 }
						}
					},
					name: {
						required: true,
						maxlength: 10
					},
					phone: {
						digits: true,
						maxlength: 15
					},
					remark: {
						maxlength: 250
					}
				},
				messages: {
					userName: {
						required: "请输入用户名",
						maxlength: "长度不能大于{0}",
						remote: jQuery.format("用户名已经被使用")
					},
					name: {
						required: "请输入姓名",
						maxlength: "长度不能大于{0}"
					},
					phone: {
						digits: "电话号码必须是数字",
						maxlength: "长度不能大于{0}"
					},
					remark: {
						maxlength: "长度不能大于{0}"
					}
				},
				success:function(label){
					label.addClass("checked").html("&nbsp;");
				},
				submitHandler: function(form) {
					$.blockUI();
					$.ajax({
		    			  url: "${ctx}/sys/user/save.do",   // 提交的页面
		    		      data: $('#formTable').serialize(), // 从表单中获取数据
		    		      type: "POST",
		    		      success: function(data) {
		    		    	   $.unblockUI();
		    		    	   if(data.success==true){
		    		    		    reloadData();
		    		        		showSuccessMsg();
		    		        		parent.closeWindow();
		    		        	}else{
		    		        		showFailAlert(data.msg)
		    		        	}
		    		      },
		    		      error: function(xhr) {
		    		    	  $.unblockUI();
		    		    	  showFailAlert2(xhr);
		    		      }
		    		  })
				}
			});
	   });
       function reloadData(){
    	   var tab = parent.$('#tabs').tabs('getSelected');
   		   var ifram = tab.find('iframe')[0];
   		   ifram.contentWindow.reloadGrid();
       }
	   function onSubmit(){
		   $("#formTable").submit();
	   }
       function updateInit(){
    	    var sex = '${user.sex}';
	       	if(sex != ''){
	       		if(sex=='2'){
	       			$("input[name=sex][value=2]").attr("checked",true);
	       		}else{
	       			$("input[name=sex][value=1]").attr("checked",true);
	       		}
	       	}
	       	var status = '${user.status}';
	       	if(status == '1'){
	       		$("#status").attr("checked",true);
	       	}else{
	       		$("#status").attr("checked",false);
	       	}
       }
       function showOrgan(){
		   var organOffset = $("#organName").offset();
			$("#menuContent").css({left:organOffset.left + "px", top:organOffset.top + $("#organName").outerHeight() + "px"}).slideDown("fast");

			$("body").bind("mousedown", onBodyDown);
       }
       function onClick(e, treeId, treeNode){
    		$("#organName").attr("value", treeNode.NAME);
    		$("#organId").attr("value", treeNode.ID);
    		hideMenu();
       }
       function hideMenu() {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "organName" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
				hideMenu();
			}
		}
		function resetOrgan(){
			$("#organName").attr("value", "");
			$("#organId").attr("value", "");
		}
   </script>
</head>
<body>
	<div class="easyui-layout" region="center" style="text-align: left;" fit="true">
		<div region="center" border="false" style="padding-top: 10px; text-align: left; background: #fff; border: 1px solid #ccc;">
			<form id="formTable" method="post" >
			    <input type="hidden" name="id" value="${user.id}"/>
				<table border="0" class="grid_layout" cellpadding="0" cellspacing="0">
					<tr>
						<th><span style="color: red;">*</span>用户名：</th>
						<td>
						<input name="userName" type="text" style="width: 150px;" id="userName" value="${user.userName}"/>
						</td>
					</tr>
					<tr>
						<th><span style="color: red;">*</span>姓名：</th>
						<td>
						<input name="name" type="text" style="width: 150px;" id="name" value="${user.name}"/>
						</td>
					</tr>
					<tr>
						<th>性别：</th>
						<td>
						<input name="sex" type="radio" value="1"/>男
						<input name="sex" type="radio" value="2"/>女
						</td>
					</tr>
					<tr>
						<th>所属机构：</th>
						<td>
						<input type="text" readonly="readonly" style="width: 150px;" id="organName" onfocus="showOrgan();"/>
						<a id="delBtn" class="easyui-linkbutton" data-options="plain:true" href="#" onclick="resetOrgan(); return false;">清空</a>
						<input type="hidden" id="organId" name="organId" value="${user.organId}"/>
						</td>
					</tr>
					<tr>
						<th>手机/电话：</th>
						<td>
						<input name="phone" type="text" style="width: 150px;" id="phone" value="${user.phone}"/>
						</td>
					</tr>
					<tr>
						<th>是否可用：</th>
						<td>
						<input name="status" type="checkbox" id="status" value="1"/>
						</td>
					</tr>
					<tr>
						<th>备注：</th>
						<td><textarea id="remark" name="remark" rows="6" cols="40" >${user.remark}</textarea>
						</td>
					</tr>
				</table>
			</form>
		</div>
		<div region="south" border="false" style="text-align: right; padding: 5px 5px 5px 0;">
			<a class="easyui-linkbutton" iconcls="icon-ok" href="javascript:void(0)" onclick="onSubmit();">提交</a>
			<a class="easyui-linkbutton" iconcls="icon-cancel" href="javascript:void(0)" onclick="parent.closeWindow();">取消</a>
		</div>
	</div>
	<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
		<ul id="organTree" class="ztree" style="margin-top:0; width:180px; height: 220px;">
		</ul>
	</div>
</body>
</html>
